/**
 * @description 列表页面对应的属性组件
 */

import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Input, Radio } from 'antd';

import { replaceObjectStyle, replaceCssStyle } from '@/utils/style';
import { setAttrForm } from '@/utils/AttrForm';
import { debounce } from 'lodash-es'
import { copyTemplate, pasteTemplate, copyBlock, pasteBlock } from '@/utils/clipboard';
import { FlagOptions, iconTextReg } from '@/utils/Const';
import { UpdateContext } from '@/store/updateContext';

import StyleWrapper from '@/components/StylesWrapper';
import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from './Components/AttrHeaderBtn';
import AttrExtra from './Components/AttrExtra';

// 表单布局
const layoutOption = [
  {
    value: 'horizontal',
    label: '水平'
  },
  {
    value: 'vertical',
    label: '垂直'
  },
]

function CenterAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()

  // 更新style样式文件
  let upateStyleEvent = (keys) => {
    let divData = Object.assign({}, form.getFieldValue(keys))

    // keys数组的最后一项，就是key
    let key = keys.at(-1)
    replaceObjectStyle(actKey, key, divData)
  }

  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    replaceCssStyle(actKey, value)
  }

  // input组件onChange事件防抖
  let onConfigEvent_debounce = debounce((keys, newValue) => {
    onConfigEvent(keys, newValue)
  }, 300)


  // 图标输入框变化事件，比普通输入框，多一个字符串转化逻辑
  let iconEvent = (keys, value) => {

    // 去除 空格、<、/> 
    let newValue = value.replace(iconTextReg, '')
    form.setFieldValue(keys, newValue)

    onConfigEvent(keys, newValue)
  }
  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }

  // 属性栏右上角按钮事件
  let handleAttrEvent = (eventKey, blockKey, paramKeys, classKey) => {
    switch (eventKey) {

      // 复制模块
      case 'copy':
        copyBlock(actKey, blockKey, paramKeys, classKey, form)
        break;

      // 黏贴模块
      case 'paste':
        pasteBlock(actKey, blockKey, paramKeys, classKey, form, onConfigEvent)
        updateCtx.setUpdateFlag(pre => !pre)
        break;


      default:
        break;
    }
  }

  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------
  let items = useMemo(() => {

    let items = [
      {
        key: "page",
        label: "总盒子",
        children:
          <StyleWrapper form={form} preKeys={['page', 'default']} onStyleChange={() => upateStyleEvent(['page'])} />
      },
      {
        key: "header",
        label: "页面标题",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'pageTitle', ['header'], 'commonwrapper')} />,
        children:
          <Collapse accordion items={[
            {
              key: "box",
              label: "盒子",
              children: <StyleWrapper form={form} preKeys={['header', 'commonwrapper_box', 'default']} onStyleChange={() => upateStyleEvent(['header', 'commonwrapper_box'])} />
            },
            {
              key: "title",
              label: "标题",
              children: <StyleWrapper form={form} preKeys={['header', 'commonwrapper_title', 'default']} onStyleChange={() => upateStyleEvent(['header', 'commonwrapper_title'])} />
            },
          ]} />
      },
      {
        key: "info",
        label: "用户信息",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'userinfo', ['info'], 'info')} />,
        children:
          <>
            <Form.Item
              label="标签分隔符号"
              name={['info', 'base', 'colonText']}
            >
              <Input
                onChange={(e) => onConfigEvent(['info', 'base', 'colonText'], e.target.value)}
              />
            </Form.Item>

            <Collapse accordion items={[
              {
                key: "box",
                label: "盒子",
                children: <StyleWrapper form={form} preKeys={['info', 'box', 'default']} onStyleChange={() => upateStyleEvent(['info', 'box'])} />
              },
              {
                key: "title",
                label: "标题",
                children: <StyleWrapper form={form} preKeys={['info', 'title', 'default']} onStyleChange={() => upateStyleEvent(['info', 'title'])} />
              },
              {
                key: "avatar",
                label: "图像",
                children: <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['info', 'avatar', 'default']} onStyleChange={() => upateStyleEvent(['info', 'avatar'])} />
                  },
                  {
                    key: "img",
                    label: "图片",
                    children: <StyleWrapper form={form} preKeys={['info', 'avatar_img', 'default']} onStyleChange={() => upateStyleEvent(['info', 'avatar_img'])} />
                  },
                ]} />
              },
              {
                key: "name",
                label: "用户名",
                children: <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['info', 'name', 'default']} onStyleChange={() => upateStyleEvent(['info', 'name'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['info', 'name_label', 'default']} onStyleChange={() => upateStyleEvent(['info', 'name_label'])} />
                  },
                  {
                    key: "text",
                    label: "内容",
                    children: <StyleWrapper form={form} preKeys={['info', 'name_text', 'default']} onStyleChange={() => upateStyleEvent(['info', 'name_text'])} />
                  },
                ]} />
              },
              {
                key: "money",
                label: "余额",
                children: <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['info', 'money', 'default']} onStyleChange={() => upateStyleEvent(['info', 'money'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['info', 'money_label', 'default']} onStyleChange={() => upateStyleEvent(['info', 'money_label'])} />
                  },
                  {
                    key: "text",
                    label: "内容",
                    children: <StyleWrapper form={form} preKeys={['info', 'money_text', 'default']} onStyleChange={() => upateStyleEvent(['info', 'money_text'])} />
                  },
                ]} />
              },
              {
                key: "others",
                label: "其它",
                children: <Collapse accordion items={[
                  {
                    key: "box",
                    label: "盒子",
                    children: <StyleWrapper form={form} preKeys={['info', 'others', 'default']} onStyleChange={() => upateStyleEvent(['info', 'others'])} />
                  },
                  {
                    key: "label",
                    label: "标签",
                    children: <StyleWrapper form={form} preKeys={['info', 'others_label', 'default']} onStyleChange={() => upateStyleEvent(['info', 'others_label'])} />
                  },
                  {
                    key: "text",
                    label: "内容",
                    children: <StyleWrapper form={form} preKeys={['info', 'others_text', 'default']} onStyleChange={() => upateStyleEvent(['info', 'others_text'])} />
                  },
                ]} />
              },

            ]} />
          </>
      },
      {
        key: "tab",
        label: "标签页Tab",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'tab', ['centertab'], 'centertab')} />,
        children:
          <Collapse accordion items={[
            {
              key: 'box',
              label: '总盒子',
              children: <StyleWrapper form={form} preKeys={['centertab', 'centertab_box', 'default']} onStyleChange={() => upateStyleEvent(['centertab', 'centertab_box'])} />
            },
            {
              key: 'bar',
              label: '头部',
              children:
                <Collapse accordion items={[
                  {
                    key: 'box',
                    label: '盒子',
                    children: <StyleWrapper form={form} preKeys={['centertab', 'centertab_bar', 'default']} onStyleChange={() => upateStyleEvent(['centertab', 'centertab_bar'])} />
                  },
                  {
                    key: 'list',
                    label: '列表盒子',
                    children: <StyleWrapper form={form} preKeys={['centertab', 'centertab_bar_list', 'default']} onStyleChange={() => upateStyleEvent(['centertab', 'centertab_bar_list'])} />
                  },
                  {
                    key: 'item',
                    label: 'item',
                    children: <StyleWrapper form={form} preKeys={['centertab', 'centertab_bar_item', 'default']} onStyleChange={() => upateStyleEvent(['centertab', 'centertab_bar_item'])} />
                  },
                  {
                    key: 'item-hover',
                    label: 'item-悬浮',
                    children: <StyleWrapper form={form} preKeys={['centertab', 'centertab_bar_item', 'hover']} onStyleChange={() => upateStyleEvent(['centertab', 'centertab_bar_item'])} />
                  },
                  {
                    key: 'item-active',
                    label: 'item-激活',
                    children: <StyleWrapper form={form} preKeys={['centertab', 'centertab_bar_item_active', 'default']} onStyleChange={() => upateStyleEvent(['centertab', 'centertab_bar_item_active'])} />
                  },
                ]} />
            },
            {
              key: 'content',
              label: '内容盒子',
              children: < StyleWrapper form={form} preKeys={['centertab', 'centertab_content', 'default']} onStyleChange={() => upateStyleEvent(['centertab', 'centertab_content'])} />
            },
          ]}
          />
      },
      {
        key: "form",
        label: "个人中心",
        children:
          <>
            <Form.Item
              label="布局"
              name={['centerform', 'base', 'layout']}
            >
              <Radio.Group
                options={layoutOption}
                onChange={(e) => onConfigEvent(['centerform', 'base', 'layout'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Collapse accordion size='middle' items={[
              {
                key: "form",
                label: "表单盒子",
                children: <StyleWrapper form={form} preKeys={['form', 'default']} onStyleChange={() => upateStyleEvent(['form'])} />
              },
              {
                key: "input",
                label: "输入框",
                extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'form', ['centerform'], 'centerform')} />,
                children: <Collapse accordion size='middle' items={[
                  {
                    key: 'item',
                    label: 'item盒子',
                    children: <StyleWrapper form={form} preKeys={['centerform', 'centerform_item', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_item'])} />,
                  },
                  {
                    key: 'label',
                    label: '标签',
                    children:
                      <>
                        <Form.Item
                          label="开关"
                          name={['centerform', 'base', 'labelFlag']}
                        >
                          <Radio.Group
                            options={FlagOptions}
                            onChange={(e) => onConfigEvent(['centerform', 'base', 'labelFlag'], e.target.value)}
                            optionType="button"
                            buttonStyle="solid"
                          />
                        </Form.Item>

                        <Form.Item
                          label="冒号开关"
                          name={['centerform', 'base', 'colonFlag']}
                        >
                          <Radio.Group
                            options={FlagOptions}
                            onChange={(e) => onConfigEvent(['centerform', 'base', 'colonFlag'], e.target.value)}
                            optionType="button"
                            buttonStyle="solid"
                          />
                        </Form.Item>

                        <StyleWrapper form={form} preKeys={['centerform', 'centerform_label', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_label'])} />

                      </>
                  },
                  {
                    key: 'input',
                    label: '普通',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'input',
                          label: '普通',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_input', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_input'])} />,
                        },
                        {
                          key: 'input-focus',
                          label: '聚焦',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_input', 'focus']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_input'])} />,
                        },
                        {
                          key: 'input-icon',
                          label: '图标',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_input_icon', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_input_icon'])} />,
                        },
                        {
                          key: 'input-icon-hover',
                          label: '图标-hover',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_input_icon', 'hover']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_input_icon'])} />,
                        },
                      ]} />
                  },
                  {
                    key: 'input_placeholder',
                    label: '输入框的提示语',
                    children: <StyleWrapper form={form} preKeys={['centerform', 'centerform_input_placeholder', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_input_placeholder'])} />,
                  },
                  {
                    key: 'input-disable',
                    label: '禁用的样式',
                    children:
                      <StyleWrapper form={form} preKeys={['centerform', 'centerform_input_disable', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_input_disable'])} />
                  },
                  {
                    key: 'input_error',
                    label: '输入框错误时',
                    children:
                      <StyleWrapper form={form} preKeys={['centerform', 'centerform_input_error', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_input_error'])} />
                  },
                  {
                    key: 'number_input',
                    label: '数值',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'input',
                          label: '数值',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_number', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_number'])} />,
                        },
                        {
                          key: 'input-focus',
                          label: '聚焦',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_number', 'focus']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_number'])} />,
                        },
                        {
                          key: 'input-icon',
                          label: '图标盒子',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_number_icon_box', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_number_icon_box'])} />,
                        },
                        {
                          key: 'input-icon-up',
                          label: '上图标',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_number_icon_up', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_number_icon_up'])} />,
                        },
                        {
                          key: 'input-icon-down',
                          label: '下图标',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_number_icon_down', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_number_icon_down'])} />,
                        },
                      ]} />
                  },
                  {
                    key: 'select',
                    label: '单选',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'input',
                          label: '单选',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_select', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_select'])} />,
                        },
                        {
                          key: 'focus',
                          label: '聚焦',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_select', 'focus']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_select'])} />,
                        },
                        {
                          key: 'icon',
                          label: '图标',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_select_icon', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_select_icon'])} />,
                        },
                      ]} />
                  },
                  {
                    key: 'date',
                    label: '日期',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'input',
                          label: '日期',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_date', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_date'])} />,
                        },
                        {
                          key: 'focus',
                          label: '聚焦',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_date', 'focus']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_date'])} />,
                        },
                        {
                          key: 'icon',
                          label: '图标',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_date_icon', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_date_icon'])} />,
                        },
                      ]} />
                  },
                  {
                    key: 'face',
                    label: '人脸登录',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'button',
                          label: '按钮',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_face', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_face'])} />,
                        },
                        {
                          key: 'hover',
                          label: 'hover',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_face', 'hover']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_face'])} />,
                        },
                      ]} />
                  },
                  {
                    key: 'fileupload',
                    label: '文件上传',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'button',
                          label: '盒子',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_fileupload', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_fileupload'])} />,
                        },
                        {
                          key: 'hover',
                          label: 'hover',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_fileupload', 'hover']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_fileupload'])} />,
                        },
                      ]} />
                  },
                  {
                    key: 'textarea',
                    label: '多行文本',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'input',
                          label: 'input',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_textarea', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_textarea'])} />,
                        },
                        {
                          key: 'icon',
                          label: 'focus',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_textarea', 'focus']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_textarea'])} />,
                        },
                      ]} />
                  },
                  {
                    key: 'ql',
                    label: '富文本',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'box',
                          label: '盒子',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_ql', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_ql'])} />
                        },
                        {
                          key: 'header',
                          label: '工具栏',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_ql_header', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_ql_header'])} />
                        },
                        {
                          key: 'content',
                          label: '内容',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_ql_container', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_ql_container'])} />
                        },
                      ]} />
                  },
                  {
                    key: 'money',
                    label: '充值按钮',
                    children:
                      <Collapse accordion size='middle' items={[
                        {
                          key: 'btn',
                          label: '充值按钮',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_smsbtn', 'default']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_smsbtn'])} />
                        },
                        {
                          key: 'btn-hover',
                          label: '充值按钮-悬浮',
                          children:
                            <StyleWrapper form={form} preKeys={['centerform', 'centerform_smsbtn', 'hover']} onStyleChange={() => upateStyleEvent(['centerform', 'centerform_smsbtn'])} />
                        },
                      ]} />
                  },
                ]} />
              },
              {
                key: 'button',
                label: '按钮',
                children:
                  <Collapse accordion size='middle' items={[
                    {
                      key: 'box',
                      label: '盒子',
                      children:
                        <StyleWrapper form={form} preKeys={['button_box', 'default']} onStyleChange={() => upateStyleEvent(['button_box'])} />
                    },
                    {
                      key: 'btn1',
                      label: '退出登录',
                      children:
                        <StyleWrapper form={form} preKeys={['button_logout', 'default']} onStyleChange={() => upateStyleEvent(['button_logout'])} />
                    },
                    {
                      key: 'btn1-hover',
                      label: '退出登录-悬浮',
                      children:
                        <StyleWrapper form={form} preKeys={['button_logout', 'hover']} onStyleChange={() => upateStyleEvent(['button_logout'])} />
                    },
                    {
                      key: 'btn2',
                      label: '提交',
                      children:
                        <StyleWrapper form={form} preKeys={['button_submit', 'default']} onStyleChange={() => upateStyleEvent(['button_submit'])} />
                    },
                    {
                      key: 'btn2-hover',
                      label: '提交-悬浮',
                      children:
                        <StyleWrapper form={form} preKeys={['button_submit', 'hover']} onStyleChange={() => upateStyleEvent(['button_submit'])} />
                    },
                  ]} />
              },
            ]} />
          </>
      },
      {
        key: "friend",
        label: "我的好友",
        extra: <AttrExtra onEvent={(eventKey) => handleAttrEvent(eventKey, 'friendtab', ['friendtab'], 'friendtab')} />,
        children: <Collapse accordion items={[
          {
            key: "box",
            label: "列表盒子",
            children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_box', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_box'])} />
          },
          {
            key: "item",
            label: "item",
            children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_item', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_item'])} />
          },
          {
            key: "avatar",
            label: "图像和未读数字",
            children: < Collapse accordion items={[
              {
                key: "box",
                label: "盒子",
                children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_avatar_box', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_avatar_box'])} />
              },
              {
                key: "avatar",
                label: "图像",
                children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_avatar', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_avatar'])} />
              },
              {
                key: "number",
                label: "未读数字",
                children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_number', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_number'])} />
              },
            ]} />
          },
          {
            key: "name",
            label: "用户名和消息",
            children: < Collapse accordion items={[
              {
                key: "box",
                label: "盒子",
                children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_name_box', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_name_box'])} />
              },
              {
                key: "name",
                label: "用户名",
                children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_name', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_name'])} />
              },
              {
                key: "content",
                label: "消息内容",
                children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_content', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_content'])} />
              },
            ]} />
          },
          {
            key: "button",
            label: "按钮",
            children: < Collapse accordion items={[
              {
                key: "box",
                label: "盒子",
                children: <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_btn_box', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_btn_box'])} />
              },
              {
                key: 'btn1',
                label: '同意',
                children:
                  <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_agree', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_agree'])} />
              },
              {
                key: 'btn1-hover',
                label: '同意-悬浮',
                children:
                  <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_agree', 'hover']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_agree'])} />
              },
              {
                key: 'btn2',
                label: '拒绝',
                children:
                  <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_refuse', 'default']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_refuse'])} />
              },
              {
                key: 'btn2-hover',
                label: '拒绝-悬浮',
                children:
                  <StyleWrapper form={form} preKeys={['friendtab', 'friendtab_refuse', 'hover']} onStyleChange={() => upateStyleEvent(['friendtab', 'friendtab_refuse'])} />
              },
            ]} />
          },

        ]
        } />

      }
    ]
    return items
  }, [
    updateCtx.updateFlag
  ])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>
      <Form
        name='center'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 8,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />

      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>
  )
}
export default React.memo(CenterAttr) 